﻿
@{
    ViewBag.Title = "弹窗";
}

@section Style{
    @Styles.Render("~/Content/Flat/Css/base")
}

@section Script{
    @Scripts.Render("~/Content/Flat/Js/modal")
}
<!--main content start-->
<section id="main-content">
    <section class="wrapper site-min-height">
        <div class="row">
            <div class="col-lg-12">
                <!--breadcrumbs start -->
                <ul class="breadcrumb">
                    <li><a href="#"><i class="fa fa-home"></i> 首页</a></li>
                    <li><a href="#">UI元素</a></li>
                    <li class="active">模态窗口</li>
                </ul>
                <!--breadcrumbs end -->
            </div>
        </div>
        <div class="row">
            <div class="col-lg-6">

                <!--modal start-->
                <section class="panel">
                    <header class="panel-heading">
                        Default Modal Dialogs
                    </header>
                    <div class="panel-body">
                        <a class="btn btn-success" data-toggle="modal" href="#myModal">
                            默认
                        </a>
                        <a class="btn btn-warning" data-toggle="modal" href="#myModal2">
                            大窗口
                        </a>
                        <a class="btn btn-danger" data-toggle="modal" href="#myModal3">
                            小窗口
                        </a>
                        <!-- Modal -->
                        <div class="modal fade " id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                        <h4 class="modal-title">默认标题</h4>
                                    </div>
                                    <div class="modal-body">

                                        内容...

                                    </div>
                                    <div class="modal-footer">
                                        <button data-dismiss="modal" class="btn btn-default" type="button">关闭</button>
                                        <button class="btn btn-success" type="button">保存</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- modal -->
                        <!-- Modal -->
                        <div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                            <div class="modal-dialog modal-lg">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                        <h4 class="modal-title">标题</h4>
                                    </div>
                                    <div class="modal-body">

                                        内容...

                                    </div>
                                    <div class="modal-footer">
                                        <button data-dismiss="modal" class="btn btn-default" type="button">关闭</button>
                                        <button class="btn btn-warning" type="button"> 确认</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- modal -->
                        <!-- Modal -->
                        <div class="modal fade" id="myModal3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                            <div class="modal-dialog modal-sm">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                        <h4 class="modal-title">标题</h4>
                                    </div>
                                    <div class="modal-body">

                                        内容...

                                    </div>
                                    <div class="modal-footer">
                                        <button class="btn btn-danger" type="button"> 确认</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- modal -->

                    </div>
                </section>
                <!--modal start-->
                <!--modal start-->
                <section class="panel">
                    <header class="panel-heading">
                        垂直中心对齐模态对话框
                    </header>
                    <div class="panel-body">
                        <a class="btn btn-success" data-toggle="modal" href="#myModal4">
                            默认
                        </a>
                        <a class="btn btn-warning" data-toggle="modal" href="#myModal5">
                            大窗口
                        </a>
                        <a class="btn btn-danger" data-toggle="modal" href="#myModal6">
                            小窗口
                        </a>

                        <!--vertical center Modal start-->
                        <div class="modal fade modal-dialog-center " id="myModal4" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                            <div class="modal-dialog ">
                                <div class="modal-content-wrap">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                            <h4 class="modal-title">标题</h4>
                                        </div>
                                        <div class="modal-body">

                                            内容...

                                        </div>
                                        <div class="modal-footer">
                                            <button data-dismiss="modal" class="btn btn-default" type="button">关闭</button>
                                            <button class="btn btn-warning" type="button"> 确认</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- vertical center Modal end -->
                        <!-- vertical center large Modal  start -->
                        <div class="modal fade modal-dialog-center" id="myModal5" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                            <div class="modal-dialog modal-lg">
                                <div class="modal-content-wrap">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                            <h4 class="modal-title">标题</h4>
                                        </div>
                                        <div class="modal-body">

                                            内容...

                                        </div>
                                        <div class="modal-footer">
                                            <button data-dismiss="modal" class="btn btn-default" type="button">关闭</button>
                                            <button class="btn btn-warning" type="button"> 确认</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- vertical center large Modal end -->
                        <!-- vertical center small Modal start -->
                        <div class="modal fade modal-dialog-center" id="myModal6" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                            <div class="modal-dialog modal-sm">
                                <div class="modal-content-wrap">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                            <h4 class="modal-title">标题</h4>
                                        </div>
                                        <div class="modal-body">

                                            内容...

                                        </div>
                                        <div class="modal-footer">
                                            <button data-dismiss="modal" class="btn btn-default" type="button">关闭</button>
                                            <button class="btn btn-warning" type="button"> 确认</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- vertical center small Modal end -->

                    </div>
                </section>
                <!--modal start-->
                <!--modal start-->
                <section class="panel">
                    <header class="panel-heading">
                        顶部空白模态对话框
                    </header>
                    <div class="panel-body">

                        <a class="btn btn-default" data-toggle="modal" href="#myModal9">
                            顶部
                        </a>

                        <!-- vertical center top side Modal start -->
                        <div class="modal fade modal-dialog-center top-modal-with-space" id="myModal9" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                            <div class="modal-dialog">
                                <div class="">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                            <h4 class="modal-title">标题</h4>
                                        </div>
                                        <div class="modal-body">

                                            内容...

                                        </div>
                                        <div class="modal-footer">
                                            <button data-dismiss="modal" class="btn btn-default" type="button">关闭</button>
                                            <button class="btn btn-warning" type="button"> 确认</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- vertical center top side Modal end -->


                    </div>
                </section>
                <!--modal start-->
                <!--modal start-->
                <section class="panel">
                    <header class="panel-heading">
                        顶部没有间隙模态窗口
                    </header>
                    <div class="panel-body">

                        <a class="btn btn-success" data-toggle="modal" href="#myModal10">
                            Default Top
                        </a>
                        <a class="btn btn-warning" data-toggle="modal" href="#myModal11">
                            Large Top
                        </a>
                        <a class="btn btn-danger" data-toggle="modal" href="#myModal12">
                            Small Top
                        </a>

                        <!--vertical center Modal start-->
                        <div class="modal fade top-modal-without-space " id="myModal10" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                            <div class="modal-dialog ">
                                <div class="modal-content-wrap">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                            <h4 class="modal-title">标题</h4>
                                        </div>
                                        <div class="modal-body">

                                            内容...

                                        </div>
                                        <div class="modal-footer">
                                            <button data-dismiss="modal" class="btn btn-default" type="button">关闭</button>
                                            <button class="btn btn-warning" type="button"> 确认</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- vertical center Modal end -->
                        <!-- vertical center large Modal  start -->
                        <div class="modal fade top-modal-without-space" id="myModal11" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                            <div class="modal-dialog modal-lg">
                                <div class="modal-content-wrap">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                            <h4 class="modal-title">标题</h4>
                                        </div>
                                        <div class="modal-body">

                                            内容...

                                        </div>
                                        <div class="modal-footer">
                                            <button data-dismiss="modal" class="btn btn-default" type="button">关闭</button>
                                            <button class="btn btn-warning" type="button"> 确认</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- vertical center large Modal end -->
                        <!-- vertical center small Modal start -->
                        <div class="modal fade top-modal-without-space" id="myModal12" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                            <div class="modal-dialog modal-sm">
                                <div class="modal-content-wrap">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                            <h4 class="modal-title">标题</h4>
                                        </div>
                                        <div class="modal-body">

                                            内容...

                                        </div>
                                        <div class="modal-footer">
                                            <button data-dismiss="modal" class="btn btn-default" type="button">关闭</button>
                                            <button class="btn btn-warning" type="button"> 确认</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- vertical center small Modal end -->

                    </div>
                </section>
                <!--modal start-->





            </div>

            <div class="col-lg-6">
                <!--modal start-->
                <section class="panel">
                    <header class="panel-heading">
                        With Space Modal Dialogs
                    </header>
                    <div class="panel-body">

                        <a class="btn btn-info" data-toggle="modal" href="#myModal7">
                            Left
                        </a>
                        <a class="btn btn-primary" data-toggle="modal" href="#myModal8">
                            Right
                        </a>

                        <!-- vertical center left side Modal start -->
                        <div class="modal fade modal-dialog-center left-modal-with-space" id="myModal7" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                            <div class="modal-dialog">
                                <div class="modal-content-wrap">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                            <h4 class="modal-title">标题</h4>
                                        </div>
                                        <div class="modal-body">

                                            内容...

                                        </div>
                                        <div class="modal-footer">
                                            <button data-dismiss="modal" class="btn btn-default" type="button">关闭</button>
                                            <button class="btn btn-warning" type="button"> 确认</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- vertical center left side Modal end -->
                        <!-- vertical center right side Modal start -->
                        <div class="modal fade modal-dialog-center right-modal-with-space" id="myModal8" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                            <div class="modal-dialog">
                                <div class="modal-content-wrap">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                            <h4 class="modal-title">标题</h4>
                                        </div>
                                        <div class="modal-body">

                                            内容...

                                        </div>
                                        <div class="modal-footer">
                                            <button data-dismiss="modal" class="btn btn-default" type="button">关闭</button>
                                            <button class="btn btn-warning" type="button"> 确认</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- vertical center right side Modal end -->

                    </div>
                </section>
                <!--modal start-->
                <!--modal start-->
                <section class="panel">
                    <header class="panel-heading">
                        Without Space Modal Dialogs
                    </header>
                    <div class="panel-body">

                        <a class="btn btn-info" data-toggle="modal" href="#myModal13">
                            Left
                        </a>
                        <a class="btn btn-primary" data-toggle="modal" href="#myModal14">
                            Right
                        </a>



                        <!-- vertical center left side Modal start -->
                        <div class="modal fade modal-dialog-center left-modal-without-space" id="myModal13" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                            <div class="modal-dialog">
                                <div class="modal-content-wrap">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                            <h4 class="modal-title">标题</h4>
                                        </div>
                                        <div class="modal-body">

                                            内容...

                                        </div>
                                        <div class="modal-footer">
                                            <button data-dismiss="modal" class="btn btn-default" type="button">关闭</button>
                                            <button class="btn btn-warning" type="button"> 确认</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- vertical center left side Modal end -->
                        <!-- vertical center right side Modal start -->
                        <div class="modal fade modal-dialog-center  right-modal-without-space" id="myModal14" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                            <div class="modal-dialog">
                                <div class="modal-content-wrap">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                            <h4 class="modal-title">标题</h4>
                                        </div>
                                        <div class="modal-body">

                                            内容...

                                        </div>
                                        <div class="modal-footer">
                                            <button data-dismiss="modal" class="btn btn-default" type="button">关闭</button>
                                            <button class="btn btn-warning" type="button"> 确认</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- vertical center right side Modal end -->



                    </div>
                </section>
                <!--modal start-->
                <!--modal start-->
                <section class="panel">
                    <header class="panel-heading">
                        高度满屏模态窗口
                    </header>
                    <div class="panel-body">

                        <a class="btn btn-warning" data-toggle="modal" href="#myModal16">
                            左边
                        </a>
                        <a class="btn btn-danger" data-toggle="modal" href="#myModal17">
                            右边
                        </a>
                        <!-- Modal -->
                        <div class="modal fade full-width-modal-left" id="myModal16" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                            <div class="modal-dialog modal-sm">
                                <div class="modal-content-wrap">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                            <h4 class="modal-title">标题</h4>
                                        </div>
                                        <div class="modal-body">

                                            内容...

                                        </div>
                                        <div class="modal-footer">
                                            <button data-dismiss="modal" class="btn btn-default" type="button">关闭</button>
                                            <button class="btn btn-warning" type="button"> 确认</button>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                        <!-- modal -->
                        <!-- Modal -->
                        <div class="modal fade full-width-modal-right" id="myModal17" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                            <div class="modal-dialog modal-sm">
                                <div class="modal-content-wrap">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                            <h4 class="modal-title">标题</h4>
                                        </div>
                                        <div class="modal-body">

                                            内容...

                                        </div>
                                        <div class="modal-footer">
                                            <button data-dismiss="modal" class="btn btn-default" type="button">关闭</button>
                                            <button class="btn btn-warning" type="button"> 确认</button>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                        <!-- modal -->

                    </div>
                </section>
                <!--modal start-->
            </div>

        </div>
    </section>
</section>
<!--main content end-->